<template>
  <!-- 连接器列表 -->
  <basic-container>
      <div>
        <m-s-search
          @searchClick="(v) => queryFormData(v)"
          :list="ConnectListOption.column"
        >
        </m-s-search>
      </div>
    <avue-crud
      :option="ConnectListOption"
      :data="data"
      @current-change="currentChange"
      @size-change="sizeChange"
      @selection-change="(v) => (selection = v)"
      ref="crud"
      :page.sync="page"
    >
      <template slot="menuLeft">
        <el-button
          size="small"
          type="primary"
          @click="addToTabsList('连接器', { oid: -1 }, 'connectTemp', 'open')"
        >
          新增
        </el-button>
        <!--        <el-button size="small" type="primary">
          创建服务
        </el-button>-->
        <el-button size="small" :disabled="selection.length === 0" @click="del"
          >删除</el-button
        >
      </template>

      <template slot="name" slot-scope="{ row }">
        <span
          class="column-btn"
          @click="addToTabsList(row.name, row, 'connectTemp', 'view')"
        >
          {{ row.name }}
        </span>
      </template>
      <template slot="menu" slot-scope="{ row }">
        <!-- <el-button
          type="text"
          @click="addToTabsList('连接器', row, 'connectTemp', 'view')"
        >
          查看
        </el-button> -->
        <el-button
          type="text"
          @click="addToTabsList('连接器', row, 'connectTemp', 'edit')"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          v-if="Number(row.enable) === 1"
          @click="changeState(row, 'disable')"
        >
          禁用
        </el-button>
        <el-button type="text" v-else @click="changeState(row, 'enable')">
          启用
        </el-button>
      </template>
    </avue-crud>

    <ms-drawer
      @refresh="getPage()"
      ref="md"
      :visible.sync="visible"
      :tab-list.sync="tabsList"
    ></ms-drawer>
  </basic-container>
</template>

<script>
import * as api from "@/api/connect/index";
import MSSearch from "@/DMDComponents/MSSearch.vue";

export default {
  name: "connectList",
  inject: ["ConnectListOption"],
  components: { MSSearch },
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      data: [],
      selection: [],
      visible: false,
      tabsList: [],
      queryForm:{},
    };
  },
  methods: {
    initPage(){
      this.page={
        pageSize: 10,
        currentPage: 1,
        total: 0,
      };
    },
    queryFormData(v){
      this.initPage();
      this.queryForm = v ||{}
      this.getPage();
    },
    del() {
      this.$confirm("是否删除").then(() => {
        let ids = this.selection.map((i) => i.id).join(",");
        api.del({ ids }).then(() => {
          this.$message.success("删除成功！");
          this.getPage();
        });
      });
    },
    // 向抽屉中添加tab页 根据 oid 去重
    addToTabsList(title, row, component, type) {
      let ids = this.tabsList.map((item) => item.row[this.idKey]);
      if (!ids.includes(row[this.idKey])) {
        this.tabsList.push({ title, row, component, type });
      }
      this.visible = true;
    },
    __refreshTable() {
      this.$refs["crud"].refreshTable();
    },
    getPage() {
      this.data = [];
      api
        .getPage({ current: this.page.currentPage, size: this.page.pageSize,...this.queryForm })
        .then((res) => {
          let { totalRows, list } = res.data.data;
          this.page.total = totalRows;
          this.data = list;
        });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getPage();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getPage();
    },
    // 启用/停用
    changeState(data, type) {
      let msg = type === "enable" ? "启用成功" : "禁用用成功";
      api[type]({ id: data.id }).then(() => {
        this.$message.success(msg);
        this.getPage();
      });
    },
  },
  mounted() {
    this.getPage();
    this.$nextTick(() => {
      // 表格错位解决方法
      this.$refs.crud.refreshTable();
    });
  },
};
</script>